<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 表单数据 -->
            <el-table
                :data="userList"
                border>
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column label="状态">
                    <!-- 通过作用于插槽实现状态操作 -->
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180ox">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <el-tooltip effect="dark" content="分配角色" placement="top-start" :enterable="false">
                             <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>                    
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
export default {
    data () {
        return {
           getUSer:{
               query:'',
               pagenum:1,
               pagesize:2
           },
            userList:[],
            total:0,
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
        // 获取用户列表
       async getUserList(){
          const {data:res} = await this.$http.get('users',{params:this.getUSer})
          console.log(res); 
          if(res.meta.status !== 200) return this.$message.error('获取用户列表失败')
          this.userList = res.data.users
          this.total = res.data.total
        }
    }
}
</script>
<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
.el-table{
    margin-top: 20px;
    font-size: 12px;
}
</style>
